import React, { useEffect, useState } from "react"

import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

const OperationFuncSelect = ({ rules, disable, labelProps, selectorProps }: any) => {
	const { formatMessage } = useLocale()
	const [dataResponse, setDataResponse] = useState<any[]>([])

	const { generalHttp } = useApi()

	useEffect(() => {
		const fetchData = async () => {
			const [err, data] = await generalHttp("/operatelog/selectEnum", undefined)

			if (!err) {
				setDataResponse((data as any).proxyFuncs)
			}
		}
		fetchData()
	}, [])

	const options = dataResponse.map(item => ({
		value: item,
		label: item
	}))

	return (
		<SFormItem name="operationFunc" rules={rules} {...labelProps} label={formatMessage({ id: "member.vip_change_type" })}>
			<StyleSelect
				placeholder={formatMessage({ id: "common.select_all" })}
				allowClear
				options={options}
				disable={disable}
				{...selectorProps}
			/>
		</SFormItem>
	)
}

export default OperationFuncSelect
